<template>
  <view>
    <view class="" style="font-size: 28rpx; padding: 28rpx">医院logo</view>
    <view class="" style="height: 180rpx; padding: 0 28rpx">
      <image :src="logo" mode="aspectFill" style="width: 180rpx; height: 180rpx" @tap="xgtx"></image>
    </view>
    <view class="" style="font-size: 28rpx; padding: 28rpx">医院名称</view>
    <view class="" style="height: 100rpx; background: #fff; margin: 0 28rpx; border-radius: 20rpx">
      <input type="text" placeholder="请填写医院名称" v-model="hospital_name" style="height: 100rpx; font-size: 28rpx; padding-left: 15rpx" />
    </view>

    <view class="" style="font-size: 28rpx; padding: 28rpx">医院类型</view>
    <view class="" style="display: flex; align-items: center; padding: 0 28rpx">
      <view class="" @tap="radio = 1" style="display: flex; align-items: center">
        <radio :checked="radio == 1" color="#18A4FF" style="transform: scale(0.7)"></radio>
        公立
      </view>
      <view class="" @tap="radio = 2" style="display: flex; align-items: center; margin-left: 28rpx">
        <radio :checked="radio == 2" color="#18A4FF" style="transform: scale(0.7)"></radio>
        私立
      </view>
    </view>

    <view class="" style="font-size: 28rpx; padding: 28rpx">医院等级</view>
    <view
      class=""
      style="height: 100rpx; background: #fff; margin: 0 28rpx; border-radius: 20rpx; padding: 0 15rpx; display: flex; align-items: center; justify-content: space-between"
      @tap="show = true"
    >
      <view class="" style="font-size: 28rpx; color: #888; line-height: 100rpx">
        {{ level }}
      </view>
      <view class="">
        <u-icon name="arrow-down" color="#999"></u-icon>
      </view>
    </view>

    <view class="" style="font-size: 28rpx; padding: 28rpx">医院电话</view>
    <view class="" style="height: 100rpx; background: #fff; margin: 0 28rpx; border-radius: 20rpx">
      <input type="text" placeholder="请填写医院手机号" v-model="hospital_phone" style="height: 100rpx; font-size: 28rpx; padding-left: 15rpx" />
    </view>

    <view class="" style="font-size: 28rpx; padding: 28rpx">医院地址</view>
    <view
      class=""
      style="height: 100rpx; background: #fff; margin: 0 28rpx; border-radius: 20rpx; padding: 0 15rpx; display: flex; align-items: center; justify-content: space-between"
      @tap="getjwd"
    >
      <view class="" style="font-size: 28rpx; color: #888; line-height: 100rpx">
        {{ hospital_city }}
      </view>
      <view class="">
        <u-icon name="arrow-right" color="#999"></u-icon>
      </view>
    </view>

    <view class="" style="font-size: 28rpx; padding: 28rpx">医院详细地址</view>
    <view class="" style="padding: 0 28rpx">
      <u-input v-model="hospital_address" type="textarea" :border="true" height="200" :auto-height="true" />
    </view>

    <view class="" style="font-size: 28rpx; padding: 28rpx">医院简介</view>
    <view class="" style="padding: 0 28rpx">
      <u-input v-model="introduce" type="textarea" :border="true" height="200" :auto-height="true" />
    </view>
    <view class="" style="height: 220rpx"></view>
    <!-- <view class="" style="width: 100%;height: 200rpx;background: #fff;position: fixed;bottom: 0;"> -->
    <view class="btn" @tap="apply">申请入驻</view>
    <!-- </view> -->

    <u-picker mode="selector" v-model="show" :default-selector="[0]" :range="list" range-key="level_name" @confirm="confirm"></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hospital_name: '',
      radio: 1,
      show: false,
      list: [],
      hospital_phone: '',
      hospital_city: '请选择医院地址',
      hospital_address: '',
      long: '',
      lat: '',
      introduce: '',
      imgurl: '',
      logo: 'https://wenzhen.fuerle168.com/static/user/upload.png',
      level: '请选择医院等级',
      level_id: ''
    };
  },
  methods: {
    apply() {
      if (this.logo == 'https://wenzhen.fuerle168.com/static/user/upload.png') {
        uni.showToast({
          title: '请上传医院logo',
          icon: 'none'
        });
      } else if (this.hospital_name == '') {
        uni.showToast({
          title: '请填写医院名称',
          icon: 'none'
        });
      } else if (this.level == '请选择医院等级') {
        uni.showToast({
          title: '请选择医院等级',
          icon: 'none'
        });
      } else if (this.hospital_phone == '') {
        uni.showToast({
          title: '请填写医院手机号',
          icon: 'none'
        });
      } else if (this.hospital_city == '') {
        uni.showToast({
          title: '请选择医院地址',
          icon: 'none'
        });
      } else if (this.introduce == '') {
        uni.showToast({
          title: '请填写医院简介',
          icon: 'none'
        });
      } else {
        this.api({
          url: '/api//user/hospitalSettled',
          method: 'post',
          data: {
            level: this.level_id,
            classify: this.radio,
            hospital_name: this.hospital_name,
            hospital_image: this.imgurl,
            hospital_phone: this.hospital_phone,
            hospital_city: this.hospital_city,
            hospital_address: this.hospital_address,
            hospital_long: this.long,
            hospital_lat: this.lat,
            introduce: this.introduce
          }
        }).then((res) => {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        });
      }
    },
    confirm(e) {
      console.log(e);
      let num = e[0];
      this.level = this.list[num].level_name;
      this.level_id = this.list[num].id;
    },
    getHospital() {
      this.api({
        url: '/api/index/getHospitalLevelList',
        method: 'post'
      }).then((res) => {
        this.list = res.data;
      });
    },
    getjwd() {
      let that = this;
      uni.chooseLocation({
        success: function (res) {
          console.log(res);
          that.hospital_city = that.formatLocation(res).REGION_PROVINCE + '/' + that.formatLocation(res).REGION_CITY + '/' + that.formatLocation(res).REGION_COUNTRY;
          that.hospital_address = res.address;
          that.lat = res.latitude;
          that.long = res.longitude;
          if (isNaN(res.longitude)) {
            uni.showToast({
              title: '地址出错，请重新选择',
              icon: 'none'
            });
          }
        }
      });
    },
    formatLocation(res) {
      // var regex = /^(北京市|天津市|重庆市|上海市|香港特别行政区|澳门特别行政区)/;
      var regex = /^(北京|天津|重庆|上海|香港特别行政区|澳门特别行政区)/;
      var REGION_PROVINCE = [];
      var addressBean = {
        REGION_PROVINCE: null,
        REGION_COUNTRY: null,
        REGION_CITY: null,
        ADDRESS: null
      };

      function regexAddressBean(address, addressBean) {
        // regex = /^(.*?[市州]|.*?地区|.*?特别行政区)(.*?[市区县])(.*?)$/g;
        regex = /^(.*?[市]|.*?地区|.*?特别行政区)(.*?[市区县])(.*?)$/g;
        var addxress = regex.exec(address);
        addressBean.REGION_CITY = addxress[1];
        addressBean.REGION_COUNTRY = addxress[2];
        addressBean.ADDRESS = addxress[3] + '(' + res.name + ')';
        // console.log(addxress);
      }
      if (!(REGION_PROVINCE = regex.exec(res.address))) {
        regex = /^(.*?(省|自治区))(.*?)$/;
        REGION_PROVINCE = regex.exec(res.address);
        addressBean.REGION_PROVINCE = REGION_PROVINCE[1];
        regexAddressBean(REGION_PROVINCE[3], addressBean);
      } else {
        addressBean.REGION_PROVINCE = REGION_PROVINCE[1];
        regexAddressBean(res.address, addressBean);
      }
      return addressBean;
    },
    xgtx() {
      let that = this;
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        success: function (res) {
          const tempFilePaths = res.tempFilePaths;
          uni.uploadFile({
            url: 'https://wenzhen.fuerle168.com/api/common/upload', //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
              token: uni.getStorageSync('user_info').token
            },
            success: (uploadFileRes) => {
              console.log(uploadFileRes);

              that.imgurl = JSON.parse(uploadFileRes.data).data.url;
              that.logo = JSON.parse(uploadFileRes.data).data.fullurl;
            }
          });
        }
      });
    }
  },
  onShow() {
    this.getHospital();
  }
};
</script>

<style>
page {
  background: #f8f8f8;
}
.btn {
  margin: 60rpx 110rpx;
  height: 80rpx;
  background: linear-gradient(180deg, #1a9eff, #0fb8ff);
  border-radius: 40rpx;
  text-align: center;
  line-height: 80rpx;
  color: #ffffff;
  font-size: 32rpx;
}
</style>
